<!DOCTYPE html>
<html>
<head>
    <title>文件管理</title>
    {% include 'system/common/header.html' %}
</head>
<body class="ppress-container">
<!-- 搜索区域 -->
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="" lay-filter="searchForm">
            <div class="layui-form-item" style="margin-bottom: unset;">
                <label class="layui-form-label">文件名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="" class="layui-input">
                </div>
                <label class="layui-form-label">文件类型</label>
                <div class="layui-input-inline">
                    <select name="mime">
                        <option value="">全部</option>
                        <option value="image">图片</option>
                        <option value="video">视频</option>
                        <option value="audio">音频</option>
                        <option value="document">文档</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <button class="layui-btn layui-btn-md" lay-submit lay-filter="search">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 数据表格 -->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>

<!-- 卡片视图 -->
<div class="layui-card" id="card-view" style="display: none;">
    <div class="layui-card-body">
        <div class="layui-form-item" style="margin-bottom: 15px;">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-mid layui-word-aux">
                        <i class="layui-icon layui-icon-tips"></i>
                        提示：点击文件卡片可查看大图或预览文件
                    </div>
                </div>
                <div class="layui-col-md6" style="text-align: right;">
                    {% if authorize("system:file:add") %}
                    <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="add()">
                        <i class="layui-icon layui-icon-add-1"></i>
                        新增
                    </button>
                    {% endif %}
                    {% if authorize("system:file:delete") %}
                    <button class="layui-btn layui-btn-sm" onclick="selectAllCards()">
                        <i class="layui-icon layui-icon-ok"></i>
                        全选
                    </button>
                    <button class="layui-btn layui-btn-sm" onclick="batchDeleteCards()">
                        <i class="layui-icon layui-icon-delete"></i>
                        批量删除
                    </button>
                    {% endif %}
                    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="toggleViewMode()">
                        <i class="layui-icon layui-icon-table" id="cardViewModeIcon"></i>
                        <span id="cardViewModeText">表格视图</span>
                    </button>
                </div>
            </div>
        </div>
        <div id="file-cards" class="file-cards-container"></div>
    </div>
</div>

<script type="text/html" id="toolbar">
    {% if authorize("system:file:add") %}
        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
    {% endif %}
    {% if authorize("system:file:delete") %}
        <button class="layui-btn layui-btn-sm" lay-event="batchRemove">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    {% endif %}
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="viewMode">
        <i class="layui-icon layui-icon-table" id="viewModeIcon"></i>
        <span id="viewModeText">表格视图</span>
    </button>
</script>

<script type="text/html" id="user-bar">
    {% if authorize("system:file:delete") %}
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="remove"><i
                class="layui-icon layui-icon-delete"></i></button>
    {% endif %}
</script>

<script type="text/html" id="file-uploadTime">
    {{ '  {{layui.util.toDateString(d.create_time,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>

{% include 'system/common/footer.html' %}

<style>
/* 文件卡片样式 */
.file-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.file-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.file-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.file-card-header {
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
    position: relative;
}

.file-card-preview {
    position: relative;
    height: 180px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
}

.file-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.file-card:hover .file-card-preview img {
    transform: scale(1.05);
    border-radius: 12px;
}

.file-card-preview .file-icon {
    font-size: 48px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    border-radius: 12px;
}

.file-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
}

.file-card:hover .file-card-overlay {
    opacity: 1;
}

.file-card-overlay i {
    color: white;
    font-size: 24px;
}

.file-card-preview .file-type-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    color: #fff;
    background: #5FB878;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.file-card-body {
    padding: 15px;
}

.file-card-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card-info {
    color: #666;
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.file-card-info div {
    margin-bottom: 4px;
}

.file-card-size {
    color: #999;
    font-size: 12px;
}

.file-card-footer {
    padding: 12px 15px;
    border-top: 1px solid #f2f2f2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
}

.file-card-actions {
    display: flex;
    gap: 6px;
}

.file-card-checkbox {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    background: transparent;
    border-radius: 4px;
    padding: 2px;
}

/* 自定义复选框样式 */
.file-card-checkbox .layui-form-checkbox {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(5px) !important;
}

.file-card-checkbox .layui-form-checkbox:hover {
    border-color: #5FB878 !important;
    box-shadow: 0 4px 15px rgba(95,184,120,0.4) !important;
    transform: scale(1.05) !important;
}

.file-card-checkbox .layui-form-checkbox[lay-skin="primary"] i {
    background-color: #5FB878 !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 3px rgba(95,184,120,0.3) !important;
}

.file-card-checkbox .layui-form-checkbox[lay-skin="primary"]:hover i {
    background-color: #4CAF50 !important;
    box-shadow: 0 2px 6px rgba(76,175,80,0.4) !important;
}

/* 未选中状态的样式 */
.file-card-checkbox .layui-form-checkbox:not(.layui-form-checked) {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.7) !important;
}

.file-card-checkbox .layui-form-checkbox:not(.layui-form-checked):hover {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.9) !important;
}

/* 确保复选框在深色背景下也能清晰显示 */
.file-card-checkbox .layui-form-checkbox {
    position: relative !important;
}

.file-card-checkbox .layui-form-checkbox::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: 8px;
    z-index: -1;
}

/* 适配不同文件背景 */
.file-card:hover .file-card-checkbox .layui-form-checkbox {
    border-color: rgba(255,255,255,1) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* 文件类型图标 */
.file-type-image { background: #5FB878; }
.file-type-video { background: #FFB800; }
.file-type-audio { background: #1E9FFF; }
.file-type-document { background: #FF5722; }
.file-type-other { background: #999; }
</style>

<script>
  layui.use(['table', 'form', 'jquery'], function () {
    let table = layui.table
    let form = layui.form
    let $ = layui.jquery
    let currentViewMode = 'table' // 'table' 或 'card'
    
    let cols = [
      [
        {
          type: 'checkbox'
        },
        {
          field: 'id',
          title: 'ID',
          sort: true,
          align: 'center',
          unresize: true,
          width: 80
        },
        {
          field: 'name',
          title: '文件名称',
          unresize: true,
          align: 'center'
        },
        {
          field: 'href',
          title: '预览',
          unresize: true,
          align: 'center',
          templet: function (d) {
            return getFilePreviewHtml(d)
          }
        },
        {
          field: 'mime',
          title: '文件类型',
          unresize: true,
          align: 'center',
          templet: function (d) {
            return getFileTypeName(d.mime)
          }
        },
        {
          field: 'size',
          title: '文件大小',
          unresize: true,
          align: 'center',
          templet: function (d) {
            return formatFileSize(d.size)
          }
        },
        {
          field: 'create_time',
          title: '创建时间',
          templet: '#file-uploadTime',
          unresize: true,
          align: 'center'
        },
        {
          title: '操作',
          toolbar: '#user-bar',
          align: 'center',
          unresize: true,
          width: 200
        }
      ]
    ]

    // 获取文件预览HTML
    function getFilePreviewHtml(data) {
      const fileType = getFileType(data.mime)
      const fileUrl = '/admin' + data.href
      
      if (fileType === 'image') {
        return '<img class="photo" style="max-width: 50px; max-height: 50px; cursor: pointer;" lay-event="preview" src="' + fileUrl + '">'
      } else {
        return '<div class="file-icon" lay-event="preview"><i class="layui-icon ' + getFileIcon(data.mime) + '"></i></div>'
      }
    }
    
    // 获取文件类型
    function getFileType(mime) {
      if (mime.startsWith('image/')) return 'image'
      if (mime.startsWith('video/')) return 'video'
      if (mime.startsWith('audio/')) return 'audio'
      if (mime.includes('pdf') || mime.includes('word') || mime.includes('excel') || mime.includes('powerpoint')) return 'document'
      return 'other'
    }
    
    // 获取文件类型名称
    function getFileTypeName(mime) {
      const type = getFileType(mime)
      const typeNames = {
        'image': '图片',
        'video': '视频',
        'audio': '音频',
        'document': '文档',
        'other': '其他'
      }
      return typeNames[type] || '其他'
    }
    
    // 获取文件图标
    function getFileIcon(mime) {
      const type = getFileType(mime)
      const icons = {
        'image': 'layui-icon-picture',
        'video': 'layui-icon-video',
        'audio': 'layui-icon-voice',
        'document': 'layui-icon-file',
        'other': 'layui-icon-file-b'
      }
      return icons[type] || 'layui-icon-file-b'
    }
    
    // 格式化文件大小
    function formatFileSize(bytes) {
      if (bytes === 0) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    }

    table.render({
      elem: '#dataTable',
      url: 'table',
      page: true,
      cols: cols,
      skin: 'line',
      toolbar: '#toolbar',
      defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
      }, 'filter', 'print', 'exports']
    })

    table.on('tool(dataTable)', function (obj) {
      if (obj.event === 'remove') {
        window.remove(obj)
      } else if (obj.event === 'preview') {
        window.preview(obj)
      }
    })

    table.on('toolbar(dataTable)', function (obj) {
      if (obj.event === 'add') {
        window.add()
      } else if (obj.event === 'refresh') {
        window.refresh()
      } else if (obj.event === 'batchRemove') {
        window.batchRemove(obj)
      } else if (obj.event === 'viewMode') {
        toggleViewMode()
      }
    })

    // 监听搜索
    form.on('submit(search)', function(data){
      if (currentViewMode === 'table') {
        table.reload('dataTable', {
          where: data.field
        })
      } else {
        loadCardView(data.field)
      }
      return false
    })

    // 切换视图模式
    window.toggleViewMode = function() {
      if (currentViewMode === 'table') {
        // 切换到卡片视图
        $('#dataTable').parent().hide()
        $('#card-view').show()
        currentViewMode = 'card'
        $('#viewModeIcon').removeClass('layui-icon-table').addClass('layui-icon-list')
        $('#viewModeText').text('卡片视图')
        $('#cardViewModeIcon').removeClass('layui-icon-table').addClass('layui-icon-list')
        $('#cardViewModeText').text('卡片视图')
        loadCardView()
      } else {
        // 切换到表格视图
        $('#card-view').hide()
        $('#dataTable').parent().show()
        currentViewMode = 'table'
        $('#viewModeIcon').removeClass('layui-icon-list').addClass('layui-icon-table')
        $('#viewModeText').text('表格视图')
        $('#cardViewModeIcon').removeClass('layui-icon-list').addClass('layui-icon-table')
        $('#cardViewModeText').text('表格视图')
        table.reload('dataTable')
      }
    }
    
    // 加载卡片视图
    function loadCardView(searchData = {}) {
      $.ajax({
        url: 'table',
        data: searchData,
        success: function(res) {
          if (res.code === 0) {
            renderCardView(res.data)
          }
        }
      })
    }
    
         // 渲染卡片视图
     function renderCardView(data) {
       let html = ''
       data.forEach(function(item) {
         const fileType = getFileType(item.mime)
         const fileUrl = '/admin' + item.href
         const fileIcon = getFileIcon(item.mime)
         const fileTypeName = getFileTypeName(item.mime)
         
         // 检查是否为图片且有实际图片
         const isImageWithRealImage = fileType === 'image' && item.href && item.href !== ''
         
         html += `
           <div class="file-card" data-id="${item.id}">
             <input type="checkbox" class="file-card-checkbox" value="${item.id}">
             <div class="file-card-header">
               <div class="file-card-preview" onclick="previewFile('${fileUrl}', '${fileType}', '${item.name}')">
                 ${isImageWithRealImage ? 
                   `<img src="${fileUrl}" alt="${item.name}" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" onload="this.nextElementSibling.style.display='none';">` : 
                   `<i class="layui-icon ${fileIcon} file-icon"></i>`
                 }
                 ${isImageWithRealImage ? 
                   `<i class="layui-icon ${fileIcon} file-icon" style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"></i>` : 
                   ''
                 }
                 <div class="file-card-overlay">
                   <i class="layui-icon layui-icon-eye"></i>
                 </div>
               </div>
             </div>
             <div class="file-card-body">
               <div class="file-card-title" title="${item.name}">${item.name}</div>
               <div class="file-card-info">
                 <div>类型: ${fileTypeName}</div>
                 <div>大小: ${formatFileSize(item.size)}</div>
                 <div>上传: ${layui.util.toDateString(item.create_time, 'yyyy-MM-dd HH:mm:ss')}</div>
               </div>
             </div>
             <div class="file-card-footer">
               <div class="file-card-actions">
                 <button class="layui-btn layui-btn-xs" onclick="previewFile('${fileUrl}', '${fileType}', '${item.name}')">
                   <i class="layui-icon layui-icon-eye"></i> 预览
                 </button>
                 <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="removeFile(${item.id})">
                   <i class="layui-icon layui-icon-delete"></i> 删除
                 </button>
               </div>
             </div>
           </div>
         `
       })
       $('#file-cards').html(html)
     }
    
    // 全选卡片
    window.selectAllCards = function() {
      $('.file-card-checkbox').prop('checked', true)
    }
    
    // 批量删除卡片
    window.batchDeleteCards = function() {
      const checkedIds = []
      $('.file-card-checkbox:checked').each(function() {
        checkedIds.push($(this).val())
      })
      
      if (checkedIds.length === 0) {
        layer.msg('未选中数据', {icon: 3})
        return
      }
      
      layer.confirm('确定要删除这些文件吗？', {icon: 3}, function(index) {
        layer.close(index)
        let loading = layer.load()
        $.ajax({
          url: "{{ url_for('admin.sys.adminFile.batch_remove') }}",
          data: { ids: checkedIds },
          dataType: 'json',
          type: 'POST',
          success: function (res) {
            layer.close(loading)
            if (res.success) {
              layer.msg(res.msg, {icon: 1}, function() {
                loadCardView()
              })
            } else {
              layer.msg(res.msg, {icon: 2})
            }
          }
        })
      })
    }
    
    // 预览文件
    window.previewFile = function(fileUrl, fileType, fileName) {
      if (fileType === 'image') {
        // 图片预览
        var auto_img = {}
        var img = new Image()
        img.src = fileUrl
        img.onload = function () {
          var max_height = $(window).height() - 100
          var max_width = $(window).width()
          var rate1 = max_height / img.height
          var rate2 = max_width / img.width
          var rate3 = 1
          var rate = Math.min(rate1, rate2, rate3)
          auto_img.height = img.height * rate
          auto_img.width = img.width * rate
          layer.open({
            type: 1,
            title: fileName,
            area: ['auto'],
            skin: 'layui-layer-nobg',
            shadeClose: true,
            content: '<img src="' + fileUrl + '" width="' + auto_img.width + 'px" height="' + auto_img.height + 'px">'
          })
        }
      } else if (fileType === 'video') {
        // 视频播放
        var videoWidth = Math.min(800, $(window).width() * 0.8)
        var videoHeight = videoWidth * 0.5625 // 16:9 比例
        
        layer.open({
          type: 1,
          title: fileName,
          area: [videoWidth + 'px', videoHeight + 'px'],
          shadeClose: true,
          content: `
            <div style="width: 100%; height: 100%; background: #000;">
              <video controls style="width: 100%; height: 100%; object-fit: contain;">
                <source src="${fileUrl}" type="video/mp4">
                <source src="${fileUrl}" type="video/webm">
                <source src="${fileUrl}" type="video/ogg">
                您的浏览器不支持视频播放。
              </video>
            </div>
          `
        })
      } else if (fileType === 'audio') {
        // 音频播放
        layer.open({
          type: 1,
          title: fileName,
          area: ['400px', '200px'],
          shadeClose: true,
          content: `
            <div style="padding: 20px; text-align: center;">
              <div style="margin-bottom: 20px;">
                <i class="layui-icon layui-icon-voice" style="font-size: 48px; color: #5FB878;"></i>
              </div>
              <audio controls style="width: 100%;">
                <source src="${fileUrl}" type="audio/mpeg">
                <source src="${fileUrl}" type="audio/ogg">
                <source src="${fileUrl}" type="audio/wav">
                您的浏览器不支持音频播放。
              </audio>
            </div>
          `
        })
      } else {
        // 其他文件类型，直接下载或在新窗口打开
        window.open(fileUrl, '_blank')
      }
    }
    
    // 删除文件
    window.removeFile = function(id) {
      layer.confirm('确定要删除该文件吗？', {icon: 3}, function(index) {
        layer.close(index)
        let loading = layer.load()
        $.ajax({
          url: 'delete',
          data: { id: id },
          dataType: 'json',
          type: 'POST',
          success: function (res) {
            layer.close(loading)
            if (res.success) {
              layer.msg(res.msg, {icon: 1}, function() {
                loadCardView()
              })
            } else {
              layer.msg(res.msg, {icon: 2})
            }
          }
        })
      })
    }

    //弹出窗设置 自己设置弹出百分比
    function screen () {
      if (typeof width !== 'number' || width === 0) {
        width = $(window).width() * 0.8
      }
      if (typeof height !== 'number' || height === 0) {
        height = $(window).height() - 20
      }
      return [width + 'px', height + 'px']
    }

    window.add = function () {
      layer.open({
        type: 2,
        maxmin: true,
        title: '新增文件',
        shade: 0.1,
        area: screen(),
        content: 'upload'
      })
    }

    window.remove = function (obj) {
      layer.confirm('确定要删除该文件', {
        icon: 3,
        title: '提示'
      }, function (index) {
        layer.close(index)
        let loading = layer.load()
        $.ajax({
          url: 'delete',
          data: { id: obj.data['id'] },
          dataType: 'json',
          type: 'POST',
          success: function (res) {
            layer.close(loading)
            if (res.success) {
              layer.msg(res.msg, {
                icon: 1,
                time: 1000
              }, function () {
                obj.del()
              })
            } else {
              layer.msg(res.msg, {
                icon: 2,
                time: 1000
              })
            }
          }
        })
      })
    }

    window.batchRemove = function (obj) {
      let data = table.checkStatus(obj.config.id).data
      if (data.length === 0) {
        layer.msg('未选中数据', {
          icon: 3,
          time: 1000
        })
        return false
      }
      var ids = []
      var hasCheck = table.checkStatus('dataTable')
      var hasCheckData = hasCheck.data
      if (hasCheckData.length > 0) {
        $.each(hasCheckData, function (index, element) {
          ids.push(element.id)
        })
      }
      layer.confirm('确定要删除这些文件', {
        icon: 3,
        title: '提示'
      }, function (index) {
        layer.close(index)
        let loading = layer.load()
        $.ajax({
          url: "{{ url_for('admin.sys.adminFile.batch_remove') }}",
          data: { ids: ids },
          dataType: 'json',
          type: 'POST',
          success: function (res) {
            layer.close(loading)
            if (res.success) {
              layer.msg(res.msg, {
                icon: 1,
                time: 1000
              }, function () {
                table.reload('dataTable')
              })
            } else {
              layer.msg(res.msg, {
                icon: 2,
                time: 1000
              })
            }
          }
        })
      })
    }

    window.refresh = function () {
      if (currentViewMode === 'table') {
      table.reload('dataTable')
      } else {
        loadCardView()
      }
    }
    
    // 预览文件
    window.preview = function (obj) {
      const fileType = getFileType(obj.data.mime)
      const fileUrl = '/admin' + obj.data.href
      
      if (fileType === 'image') {
        // 图片预览
      var auto_img = {}
      var img = new Image()
        img.src = fileUrl
      img.onload = function () {
        var max_height = $(window).height() - 100
        var max_width = $(window).width()
        var rate1 = max_height / img.height
        var rate2 = max_width / img.width
        var rate3 = 1
        var rate = Math.min(rate1, rate2, rate3)
        auto_img.height = img.height * rate
        auto_img.width = img.width * rate
        layer.open({
          type: 1,
            title: obj.data.name,
          area: ['auto'],
            skin: 'layui-layer-nobg',
            shadeClose: true,
            content: '<img src="' + fileUrl + '" width="' + auto_img.width + 'px" height="' + auto_img.height + 'px">'
          })
        }
      } else if (fileType === 'video') {
        // 视频播放
        var videoWidth = Math.min(800, $(window).width() * 0.8)
        var videoHeight = videoWidth * 0.5625 // 16:9 比例
        
        layer.open({
          type: 1,
          title: obj.data.name,
          area: [videoWidth + 'px', videoHeight + 'px'],
          shadeClose: true,
          content: `
            <div style="width: 100%; height: 100%; background: #000;">
              <video controls style="width: 100%; height: 100%; object-fit: contain;">
                <source src="${fileUrl}" type="video/mp4">
                <source src="${fileUrl}" type="video/webm">
                <source src="${fileUrl}" type="video/ogg">
                您的浏览器不支持视频播放。
              </video>
            </div>
          `
        })
      } else if (fileType === 'audio') {
        // 音频播放
        layer.open({
          type: 1,
          title: obj.data.name,
          area: ['400px', '200px'],
          shadeClose: true,
          content: `
            <div style="padding: 20px; text-align: center;">
              <div style="margin-bottom: 20px;">
                <i class="layui-icon layui-icon-voice" style="font-size: 48px; color: #5FB878;"></i>
              </div>
              <audio controls style="width: 100%;">
                <source src="${fileUrl}" type="audio/mpeg">
                <source src="${fileUrl}" type="audio/ogg">
                <source src="${fileUrl}" type="audio/wav">
                您的浏览器不支持音频播放。
              </audio>
            </div>
          `
        })
      } else {
        // 其他文件类型，直接下载或在新窗口打开
        window.open(fileUrl, '_blank')
      }
    }
  })
</script>